<template>
  <div class="tool-attrs">
    <div class="title">
      <i class="icon iconfont" v-html="formItem.formTypeIcon"></i>{{ formItem.formTypeName }}
    </div>
    <div class="tool-list">
      <el-scrollbar>
        <TextInputConfig v-if="formItem.formType === 'TextInput'" v-bind="formItem" />
        <TextAreaInputConfig v-if="formItem.formType === 'TextAreaInput'" v-bind="formItem" />
        <NumberInputConfig v-if="formItem.formType === 'NumberInput'" v-bind="formItem" />
        <SingleSelectConfig v-if="formItem.formType === 'SingleSelect'" v-bind="formItem" />
        <MultipleSelectConfig v-if="formItem.formType === 'MultipleSelect'" v-bind="formItem" />
        <DateSelectConfig v-if="formItem.formType === 'DateSelect'" v-bind="formItem" />
        <DateRangeSelectConfig v-if="formItem.formType === 'DateRangeSelect'" v-bind="formItem" />
        <ImageUploadConfig v-if="formItem.formType === 'ImageUpload'" v-bind="formItem" />
        <FileUploadConfig v-if="formItem.formType === 'FileUpload'" v-bind="formItem" />
        <UserSelectConfig v-if="formItem.formType === 'UserSelect'" v-bind="formItem" />
        <RemarkTextConfig v-if="formItem.formType === 'RemarkText'" v-bind="formItem" />
        <LinkTextConfig v-if="formItem.formType === 'LinkText'" v-bind="formItem" />
        <InnerTableConfig v-if="formItem.formType === 'InnerTable'" v-bind="formItem" />
        <CountDataConfig v-if="formItem.formType === 'CountData'" v-bind="formItem" />
        <FormatDataConfig v-if="formItem.formType === 'FormatData'" v-bind="formItem" />
        <ServerDataConfig v-if="formItem.formType === 'ServerData'" v-bind="formItem" />
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup lang="ts">
import TextInputConfig from '../tools/textInput/TextInputConfig.vue'
import TextAreaInputConfig from '../tools/textAreaInput/TextAreaInputConfig.vue'
import NumberInputConfig from '../tools/numberInput/NumberInputConfig.vue'
import SingleSelectConfig from '../tools/singleSelect/SingleSelectConfig.vue'
import MultipleSelectConfig from '../tools/multipleSelect/MultipleSelectConfig.vue'
import DateSelectConfig from '../tools/dateSelect/DateSelectConfig.vue'
import DateRangeSelectConfig from '../tools/dateRangeSelect/DateRangeSelectConfig.vue'
import ImageUploadConfig from '../tools/imageUpload/ImageUploadConfig.vue'
import FileUploadConfig from '../tools/fileUpload/FileUploadConfig.vue'
import UserSelectConfig from '../tools/userSelect/UserSelectConfig.vue'
import RemarkTextConfig from '../tools/remarkText/RemarkTextConfig.vue'
import LinkTextConfig from '../tools/linkText/LinkTextConfig.vue'
import InnerTableConfig from '../tools/innerTable/InnerTableConfig.vue'
import CountDataConfig from '../tools/countData/CountDataConfig.vue'
import FormatDataConfig from '../tools/formatData/FormatDataConfig.vue'
import ServerDataConfig from '../tools/serverData/ServerDataConfig.vue'
const { currentTdId } = inject<{ currentTdId: any }>('tables', { currentTdId: '' })
const { forms } = inject<{ forms: any }>('forms', { forms: [] })
const formItem = computed(() => {
  return forms.value.find((item: any) => item.tdId === currentTdId.value)
})
</script>

<script lang="ts">
export default {
  name: 'ToolAttrs'
}
</script>
